<div class="container user">
  <!--header-->
  <div class="row header">
    <div class="col">
      <h1 class="title">用户注册</h1>
    </div>
  </div>
  <!--body-->
  <div class="row text-left body">
    <div class="col-sm-12 col-md-12 col-lg-10 col-xl-10" style="margin: 0 auto;"><!--自适应设置-->
      <form action="#" role="form" method="post" novalidate [formGroup]="itemForForm"
            (ngSubmit)="onSubmit(itemForForm)">
        <!--全局消息-->
        <div class="form-group">
          <div class="alert" [ngClass]="formValidSuccess?'alert-success':'alert-danger'" *ngIf="msg">{{msg}}</div>
        </div>
        <!--姓名-->
        <div class="form-group user-field">
          <i class="fa fa-user fa-lg"></i>
          <input type="text" class="form-control" formControlName="name"
                 placeholder="{{placeholder.name.title}}{{placeholder.name.prompt}}">
        </div>
        <!--手机号码-->
        <div class="form-group user-field">
          <i class="fa fa-phone fa-lg"></i>
          <input type="text" class="form-control" formControlName="phone"
                 placeholder="{{placeholder.phone.title}}{{placeholder.phone.prompt}}">
        </div>
        <!--邮箱-->
        <div class="form-group user-field">
          <i class="fa fa-envelope-o fa-lg"></i>
          <input type="text" class="form-control" formControlName="email" name="email"
                 placeholder="{{placeholder.email.title}}{{placeholder.email.prompt}}">
        </div>
        <!--密码-->
        <div class="form-group row">
          <div class="col-6">
            <div class="user-field">
              <i class="fa fa-key fa-lg"></i>
              <input type="password" class="form-control" formControlName="password"
                     placeholder="{{placeholder.password.title}}{{placeholder.password.prompt}}">
            </div>
          </div>
          <div class="col-6">
            <div class="user-field">
              <i class="fa fa-key fa-lg"></i>
              <input type="password" class="form-control" formControlName="rePassword"
                     placeholder="{{placeholder.rePassword.title}}{{placeholder.rePassword.prompt}}">
            </div>
          </div>
        </div>
        <!--性别-->
        <div class="form-group text-left">
          <div class="form-check form-check-inline">
            <label class="form-check-label">性别:</label>
          </div>
          <div class="form-check form-check-inline">
            <label class="form-check-label">
              <input type="radio" class="form-check-input mgr mgr-sm" formControlName="sex" value="male"> 男
            </label>
          </div>
          <div class="form-check form-check-inline">
            <label class="form-check-label">
              <input type="radio" class="form-check-input mgr mgr-sm" formControlName="sex" value="female"> 女
            </label>
          </div>
        </div>
        <!--爱好-->
        <div class="form-group text-left" *ngIf="hobby">
          <div class="form-check form-check-inline">
            <label class="form-check-label">爱好:</label>
          </div>
          <div class="form-check form-check-inline" *ngFor="let item of hobby;let i = index;">
            <label class="form-check-label">
              <input type="checkbox" class="form-check-input mgc mgr-sm" formControlName="hobby{{i+1}}" value="{{item.name}}"
                     (change)="onChangeHobby($event.target)"> {{item.name}}
            </label>
          </div>
        </div>
        <!--地址-->
        <div class="form-group row">
          <div class="col-2" *ngIf="levelOne">
            <select class="form-control" formControlName="province"
                    (change)="onChangeLevelOne($event.target)">
              <option value="0">请选择省</option>
              <option value="{{item.name}}" *ngFor="let item of levelOne;">{{item.name}}</option>
            </select>
          </div>
          <div class="col-2" *ngIf="levelTwo">
            <select class="form-control" formControlName="city"
                    (change)="onChangeLevelTwo($event.target)">
              <option value="0">请选择市</option>
              <option value="{{item.name}}" *ngFor="let item of levelTwo;">{{item.name}}</option>
            </select>
          </div>
          <div class="col-2" *ngIf="levelThree">
            <select class="form-control" formControlName="area"
                    (change)="onChangeLevelThree($event.target)">
              <option value="0">请选择区</option>
              <option value="{{item.name}}" *ngFor="let item of levelThree;">{{item.name}}</option>
            </select>
          </div>
          <div class="col-6">
            <div class="user-field">
              <i class="fa fa-home fa-lg"></i>
              <input type="text" class="form-control" formControlName="address"
                     placeholder="{{placeholder.address.title}}{{placeholder.address.prompt}}">
            </div>
          </div>
        </div>
        <!--自我介绍-->
        <div class="form-group">
        <textarea class="form-control" rows="3" formControlName="introduce"
                  placeholder="{{placeholder.introduce.title}}{{placeholder.introduce.prompt}}"></textarea>
        </div>
        <!--登陆按钮-->
        <div class="form-group">
          <button type="submit" class="btn btn-block btn-info"
                  [disabled]="formBtnDisabled||itemForForm.controls['hobby'].value==''||itemForForm.invalid">提交
          </button>
        </div>
      </form>
    </div>
  </div>
  <!--bottom-->
  <div class="row bottom">
    <div class="col">
      <a href="#" routerLink="/login">
        <span>登陆</span>&nbsp;<i class="fa fa-arrow-circle-o-right"></i>
      </a>
    </div>
  </div>
</div>


